<template>
  <!-- 中国地图 -->
  <div ref="map" class="mapChart"></div>
</template>

<script>
export default {
  props: {
    mapData: Array | Object,
    showVisualMap: true, //是否展示地图左面调节的
  },
  data() {
    return {
      // showVisualMap: false,
    };
  },
  created() {},
  mounted() {
    this.drawMap();
  },
  methods: {
    randomData() {
      return Math.round(Math.random() * 500);
    },
    drawMap() {
      let that = this;
      let myChart3 = that.$echarts.init(that.$refs.map);
      var mydata = that.mapData;
      let option = {
        backgroundColor: "#FFFFFF",
        tooltip: {
          trigger: "item",
          // formatter: "{b}&nbsp:&nbsp{c}",
          formatter: function (params) {
            if (params.value) {
              return params.name + ":" + params.value + "%";
            } else {
              return params.name + ":" + 0;
            }
          },
        },
        grid: { x: 0, y: 0, x2: 0, y2: 0 },

        visualMap: {
          show: that.showVisualMap,
          // show:true,
          // x: "left",
          // y: "center",
          // min: 0,
          // max: 100,
          // text: ["高", "低"],
          // realtime: false,
          // calculable: true,
          type: "piecewise", // 类型为分段型
          bottom: 50,
          left: 10,
          splitNumber: 6,
          seriesIndex: [0],
          itemWidth: 20, // 每个图元的宽度
          itemGap: 2,
          pieces: [
            // 自定义每一段的范围，以及每一段的文字
            { gte: 50,lte: 100, label: "50-100%",color: "#fd7f2c" }, // 不指定 max，表示 max 为无限大（Infinity）。
            { gte: 30, lte: 50, label: "30-50%", color: "#fea55d" },
            { gte: 15, lte: 30, label: "15-30%", color: "#fea15d" },
            { gte: 5, lte: 15, label: "5-15%", color: "#feac6d" },
            { gte: 1, lte: 5, label: "1-5%人", color: "#ffd9ae" },
            { lte: 1, label: "0-1%", color: "#ffefce" }, // 不指定 min，表示 min 为无限大（-Infinity）。
          ],
          textStyle: {
            color: "#737373",
          },

          // inRange: {
          //   color: ["#ffefce", "#fd7f2c"],
          // },
        },

        //配置属性
        series: [
          {
            name: "数据",
            type: "map",
            mapType: "china",
            roam: false, //鼠标缩放
            label: {
              normal: {
                show: true, //省份名称
              },
              emphasis: {
                show: false,
              },
            },
            data: mydata, //数据
          },
        ],
      };
      myChart3.setOption(option);
      window.addEventListener("resize", function () {
        myChart3.resize();
      });
      this.$once('hook:beforeDestroy', () => {
        this.$echarts.dispose(myChart3);
      });      
    },
  },
};
</script>
<style lang="less" scoped>
.mapChart {
  width: 100%;
  height: 100%;
}
</style>